<script type="text/javascript" src="{$base_dir}modules/billing/js/AJAX_InsurancePayment_AddMedicine.js"></script>
<script type="text/javascript">
{literal}
    $(document).ready(function() {
        // Medicine name autocomplete
        var medicineCodeAC = $('#medicineName').autocomplete('../AutoSuggest/DrugMaterialAutoSuggest4DoctorAjax?set_ajax_view');
        medicineCodeAC.setOptions({
            width:          280,
            minChars:       1,     
            matchContains:  true,                                      
            formatItem:     medicineFormatMatch                                                                
        });
                
        // Empty medicine name
        $('#medicineName').blur(function() {
            if ($(this).val() == '') {
                resetAddMedicineItemForm();
            }
        });
        
        // Medicine quantity
        $('input#medicineQuantity').autotab(
            {                 
                  maxlength: 2,
                  nospace: true,
                  format: 'numeric' 
            }); 
        
        // Medicine unit price              
        $('input#medicineUnitPrice').autotab(
            {                
                maxlength: 11, 
                nospace: true,
                format: 'posnumericlocalize' 
            });
         $('input#medicineUnitPrice').keyup(function(event) {
            showMedicinePrices();
            return moveNext(event, 'addMedicineBtn')
         });
         
         // Add medicine button
         $('#addMedicineBtn').bind('click', addMedicineItem);
         
         // Unit change
         $('#medicineUnitLbx').change(function() {
            $('#unitTitle').val($('#medicineUnitLbx option:selected').attr('label'));
         });
    });     

    // Fill data for medicine code autocomplete result
    $('#medicineName').result(function(event, data, formatted) {
        $(this).val(data[0]);
        $('#medicineId').val(data[1]);
        $('#medicineUnitLbx').val(data[10]);
        $('#medicineQuantity').val(data[11]);
        $('#medicineUnitPrice').val(data[12]);
        showMedicinePrices();
        $('#medicineName').focus();
        $('#medicineUnitLbx').trigger('change');
    });

    // Format data result for medicine code autocomplete
    function medicineFormatMatch(item) {        
        return item[0];
    }

    function medicineQuantityKeyup(event) {
        showMedicinePrices();
        return moveNext(event, 'addMedicineBtn'); 
    }

    function medicineQuantityBlur() {
        var quantity = $.trim($('#medicineQuantity').val());     
        if (quantity == '' || quantity == 0) {
            $('#medicineQuantity').val(1);               
        }
    }
    
    function showMedicinePrices() {
       var quantity = $.trim($('#medicineQuantity').val());     
        if (quantity == '' || quantity == 0) {
            quantity = 0;               
        }
        var lcInt = locale(decimalPoint, thousandSep, 0);
        var price = quantity * parseLcNum($('#medicineUnitPrice').val(), lcInt);
        if (isNaN(price)) {
            price   =   0;
        }                           
        $('#medicineOriginalPrice').text(toLcString(price, lcInt));
        $('#medicinePatientPrice').text(toLcString(price, lcInt));
    }
{/literal}    
</script>
<style>
{literal}
<!--
#addMedicineTbl td {
    vertical-align: middle !important;
}
-->
{/literal}
</style>
<div class="lab_grid">
    <!-- Heading -->
    <div class="h_div">
        <table width="100%" cellpadding="0" cellspacing="0" >
            <thead style="text-transform: uppercase;">
                <tr>
                    <th style="width: 300px;">{translate}Medicine name{/translate}</th>
                    <th style="width: 80px;">{translate}Unit{/translate}</th>
                    <th style="width: 75px;">{translate}Quantity{/translate}</th>
                    <th style="width: 100px;">{translate}Unit price{/translate}</th>
                    <th style="width: 90px;">{translate}Price{/translate}</th>
                    <th style="width: 90px;">{translate}Insurance payment{/translate}</th>
                    <th style="width: 100px;">{translate}Patient payment{/translate}</th>
                    <th class="last">&nbsp;</th>  
                </tr>
            </thead>
        </table>
    </div>
</div>
<div class="lab_grid">
    <!-- Adding medicine table -->
    <div class="b_div">
        <form id="addMedicineFrm">
            <table id="addMedicineTbl" cellspacing="0" cellpadding="0" border="0" style="width: 100%">
                <tbody> 
                   <tr>
                        <td style="width: 300px;">
                            <input id="medicineName" type="text" name="serviceName" style="width: 279px;" maxlength="255" onkeyup="return moveNext(event, 'medicineQuantity')"></input>
                            <input id="medicineId" type="hidden" value="" name="serviceId"></input>
                        </td>
                        <td style="width: 80px;">
                            <select id="medicineUnitLbx" name="unit" style="width: 60px;">
                                {html_options options=$medicineUnitList}
                            </select>
                            <input type="hidden" name="itemType" value="{$medicineType}">
                            <input type="hidden" name="unitTitle" id="unitTitle">
                        </td>        
                        <td style="width: 75px;" class="field-number">
                            <input id="medicineQuantity" type="text" name="serviceQuantity" value="1" style="width: 40px; text-align: right;" onkeyup="medicineQuantityKeyup(event);" onblur="medicineQuantityBlur();" maxlength="2"></input>
                        </td>                                     
                        <td style="width: 100px;" class="field-money">
                            <input type="text" id="medicineUnitPrice" name="unitPrice" style="width: 80px; text-align: right; font-weight: bold;" maxlength="11"></input> 
                        </td>
                        <td style="width: 90px;" class="field-money"><span id="medicineOriginalPrice"></span></td>
                        <td style="width: 90px;" class="field-money"></td>                 
                        <td style="width: 100px;" class="field-money"><span id="medicinePatientPrice"></span></td>
                        <td class="last action">
                            <div id="addMedicineBtnDiv">
                                <input id="addMedicineBtn" type="button" value="{translate}Add{/translate}"></input>
                            </div>                                            
                            <div id="addMedicineLoader" style="display: none">
                                <img src="../images/ajax-loader-small.gif">
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </form>
    </div>    
</div>